import { uuid } from '../../utils/index';
/* eslint-disable */
// @ts-ignore
export default {
  group: 'Antd',
  componentName: 'ATabs',
  title: '标签',
  category: '数据展示',
  npm: {
    destructuring: true,
    componentName: 'ATabs'
  },
  props: [
    {
      name: 'items',
      title: '标签项',
      setter: {
        componentName: 'ArraySetter',
        props: {
          itemSetter: {
            componentName: 'ObjectSetter',
            props: {
              config: {
                items: [
                  {
                    name: 'key',
                    title: 'key',
                    setter: 'StringSetter',
                    initialValue: (val: any) => val || uuid(),
                    supportVariable: false,
                  },
                  {
                    name: 'tab',
                    title: '标题',
                    setter: 'StringSetter',
                    initialValue: '标签项',
                  },
                  {
                    name: 'forceRender',
                    title: '被隐藏时是否渲染 DOM 结构',
                    setter: 'BoolSetter',
                  }
                ],
              },
            },
            initialValue: () => {
              return {
                key: `${uuid()}`,
                tab: '标签项',
                forceRender: false,
              };
            },
          },
        },
      },
      extraProps: {
        getValue(target: { node: { children: any[]; }; }, fieldValue: any[]) {
          const map = target.node.children.map((child) => {
            const key = child.getPropValue('key') ? String(child.getPropValue('key')) : child.id;
            const result = { key };
            ['key', 'tab', 'forceRender'].forEach((propKey) => {
              // @ts-ignore
              result[propKey] = child.getPropValue(propKey);
            });
            return result;
          });
          return map.length === 0 ? fieldValue : map;
        },
        setValue(target: { node: any; }, value: any[]) {
          const { node } = target;
          const map = {};

          if (!Array.isArray(value)) {
            value = [];
          }
          value.forEach((item) => {
            const tabItem = Object.assign({}, item);
            // @ts-ignore
            map[item.key] = tabItem;
          });

          node.children.mergeChildren(
            (child: { getPropValue: (arg0: string) => any; setPropValue: (arg0: string, arg1: any) => void; }) => {
              const key = String(child.getPropValue('key'));
              if (Object.hasOwnProperty.call(map, key)) {
                ['key', 'tab', 'forceRender'].forEach((propKey) => {
                  // @ts-ignore
                  child.setPropValue(propKey, map[key][propKey]);
                });
                // @ts-ignore
                delete map[key];
                return false;
              }
              return true;
            },
            () => {
              const items = [];
              for (const key in map) {
                if (Object.hasOwnProperty.call(map, key)) {
                  items.push({
                    componentName: 'ATabPane',
                    // @ts-ignore
                    props: map[key],
                  });
                }
              }
              return items;
            },
            (child1: { getPropValue: (arg0: string) => any; }, child2: { getPropValue: (arg0: string) => any; }) => {
              const a = value.findIndex(
                (item) => String(item.key) === String(child1.getPropValue('key')),
              );
              const b = value.findIndex(
                (item) => String(item.key) === String(child2.getPropValue('key')),
              );
              return a - b;
            },
          );
        },
      },
    },
    // {
    //   name: 'activeKey',
    //   title: {
    //     label: '当前激活',
    //     tip: '当前激活 tab 面板的 key',
    //   },
    //   propType: 'string',
    //   setter: 'StringSetter',
    //   supportVariable: true
    // },
    {
      name: 'defaultActiveKey',
      title: {
        label: '初始选中',
        tip: '初始化选中面板的key，如果没有设置activeKey',
      },
      propType: 'string',
      setter: 'StringSetter',
      supportVariable: true
    },
    {
      name: 'animated',
      title: {
        label: '切换动画',
        tip: '是否使用动画切换Tabs',
      },
      propType: 'bool',
      setter: 'BoolSetter',
      supportVariable: true
    },
    {
      name: 'hideAdd',
      title: {
        label: '隐藏加号',
        tip: '是否隐藏加号图标，在`type="editable-card"`时有效',
      },
      condition(target: any) {
        return target.getProps().getPropValue('type') === 'editable-card';
      },
      propType: 'bool',
      setter: 'BoolSetter',
      defaultValue: false,
      supportVariable: true
    },
    {
      name: 'size',
      title: {
        label: '尺寸',
        tip: '大小，提供 `large` `default` 和 `small` 三种大小',
      },
      propType: {
        type: 'oneOf',
        value: ['large', 'default', 'small'],
      },
      defaultValue: 'default',
    },
    {
      name: 'centered',
      title: { label: '标签居中', tip: '标签居中展示' },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter',
      supportVariable: true
    },
    {
      name: 'tabBarGutter',
      title: { label: '标签间隙', tip: 'tabs之间的间隙' },
      propType: 'number',
      setter: 'NumberSetter',
      supportVariable: true
    },
    {
      name: 'tabPosition',
      title: {
        label: '页签位置',
        tip: '页签位置',
      },
      propType: {
        type: 'oneOf',
        value: ['top', 'right', 'bottom', 'left'],
      },
      defaultValue: 'top',
    },
    {
      name: 'type',
      title: {
        label: '页签样式',
        tip: '页签的基本样式，可选`line`、`card`、`editable-card`类型',
      },
      propType: {
        type: 'oneOf',
        value: ['line', 'card', 'editable-card'],
      },
      defaultValue: 'card',
    },
    {
      name: 'onChange',
      title: '切换面板的回调',
      propType: 'func'
    },
    {
      name: 'edit',
      title: '新增和删除页签的回调',
      propType: 'func'
    },
    {
      name: 'tabClick',
      title: 'tab 被点击的回调',
      propType: 'func'
    },
    {
      name: 'tabScroll',
      title: '滚动 TabBar触发',
      propType: 'func'
    }
  ],
  configure: {
    component: {
      isContainer: true
    },
    supports: {
      style: true,
      events: ['onChange', 'onEdit', 'onTabClick', 'onTabScroll'],
    }
  },
  snippets: [
    {
      title: '标签',
      screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/tabs-1.jpg',
      schema: {
        componentName: 'ATabs',
        props: {
          type: 'card',
          items: [
            // {
            //   componentName: 'ATabPane',
            //   props: {
            //     id: "1",
            //     tab: "标签项1",
            //     key: "tab-item-1",
            //     children: {
            //       type: "JSSlot",
            //       value: []
            //     }
            //   }
            // },
            // {
            //   componentName: 'ATabPane',
            //   props: {
            //     id: "2",
            //     tab: "标签项2",
            //     key: "tab-item-2",
            //     children: {
            //       type: "JSSlot",
            //       value: []
            //     }
            //   }
            // }
          ],
        },

      }
    }
  ]
}